<template>
    <div class="resource-tab compo-tab">
        <div class="tabs-content">
            <div class="search-content m-b-10">
                <pui-search></pui-search>
                <div class="tools m-l-10">
                    <div class="tools-item"><pui-icon name="arrow-up"></pui-icon></div>
                    <div class="tools-item"><pui-icon name="arrow-down"></pui-icon></div>
                </div>
            </div>
            <div class="compo-list-content outer">
                <div class="compo-drawer" v-for="(item, i) in mainRef.detectorSourceList" :key="i">
                    <div class="compo-drawer__header">
                        <div class="compo-drawer__header__left">
                            <pui-icon :name="'triangle-' + (item.show ? 'down': 'right')" @click="item.show = !item.show"></pui-icon>
                            <span class="title">{{item.title}}</span>
                        </div>
                        <div class="compo-drawer__header__right">
                            <pui-icon name="plus" @click="addCompo(i)"></pui-icon>
                            <pui-icon name="close" @click="deleteCompoList(i)"></pui-icon>
                        </div>
                    </div>
                    <Transition name="fade">
                        <div class="compo-drawer__list inner" v-show="item.show">
                            <div :class="['compo-item',
                            ((mainRef.nowCompoInfo.listIdx + '-' + mainRef.nowCompoInfo.compoIdx) === (i + '-' + ci)) && 'active-item']"
                            v-for="(compo, ci) in item.list" :key="ci" @click="selectSource(compo, ci, i, item.type)" @click.right="showContextMenu($event, i, compo, ci, item.type)">
                                <pui-svg size="large" :name="compo.icon || 'jianshiqiicon'"></pui-svg>
                                <!-- <img v-if="compo.icon" :src="require(`@/assets/icons/passive/${compo.icon}.svg`)" /> -->
                                <!-- <img :src="item.icon" alt=""> -->
                                <span class="name">{{compo.name}}</span>
                            </div>
                        </div>
                    </Transition>
                </div>
            </div>
        </div>
        <div class="file-content">
            <puitable :columns="mainRef.columns" :data="mainRef.tableData1" />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'DetectorTab',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, computed, nextTick } from 'vue'
import ContextMenu from '../../MenuContext'
import puitable from '../tools/puiTable.vue'
import { deviceManager } from '@/services/phot_client/device'
import { PhotDetector } from '@/common/types/phot_types'
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
    'showAddSource': (val: any) => {},
    'showSetting': (val: any) => {},
})
const mainRef = reactive({
    isActive: false,
    isDisabled: false,
    nowTabIndex: '0',
    showFilter: false,
    tableData1: [
        { id: 'E', name: 'E', value: '' },
        { id: 'H', name: 'H', value: '' },
        { id: 'P', name: 'P', value: '' },
        { id: 'Spectrum', name: 'Spectrum', value: '' },
        { id: 're', name: '折射率', value: '' },
    ],
    columns: [
        { field: 'name', label: '名称' },
        { field: 'value', label: '维度/数据' },
    ],
    tabList: [
        {
            name: '位置',
            id: '0'
        },
        {
            name: '配置选项',
            id: '1'
        },
        {
            name: '目标',
            id: '2'
        }
    ] as any[],
    nowCompoInfo: {
        listIdx: '',
        compo: '',
        compoIdx: '',
        sourceType: ''
    } as any,
    iconNames: {
        'linedetector': 'linedetector',
        'blockdetector': 'blockdetector'
    },
    detectorSourceList: [] as any,
    currentListIdx: 0,
    currentCompo: {} as any
})
const tabClickHandle = (e: any) => {
    if (e.id === mainRef.nowTabIndex) {
        mainRef.showFilter = !mainRef.showFilter
        return
    }
    mainRef.nowTabIndex = e.id
}
const addCompo = async (listIdx: any) => {
    mainRef.currentListIdx = listIdx
    emit('showAddSource', 'detector')
}
const deleteCompo = async () => {
    try {
        await deviceManager.deleteDetector(mainRef.nowCompoInfo.compo.id).then(res => {
            console.log(res)
            mainRef.detectorSourceList[mainRef.nowCompoInfo.listIdx].list.splice(mainRef.nowCompoInfo.compoIdx, 1)
        })
    } catch (error) {
        proxy.$toast({
            value: '系统错误，请稍后尝试',
            type: 'error'
        })
    }
}
const deleteCompoList = (listIdx: any) => {
    console.log(listIdx)
    mainRef.detectorSourceList.splice(listIdx, 1)
}
const showContextMenu = (e: any, listIdx: any, compo: any, compoIdx: any, sourceType: any) => {
    console.log({listIdx,compo,compoIdx})
    const menuList = [
        {
            label: '编辑对象属性',
            type: 'edit',
            fn: () => {
                emit('showSetting', mainRef.nowCompoInfo)
            }
        },
        {
            label: '删除',
            type: 'delete',
            fn: () => {
                deleteCompo()
            }
        }
    ]
    // mainRef.nowCompoInfo = {listIdx: listIdx, compo: compo, compoIdx: compoIdx, sourceType}
    selectSource(compo, compoIdx, listIdx, sourceType)
    e.preventDefault()
    ContextMenu(e, menuList)
}
const addSource = (source: any) => {
    if (mainRef.detectorSourceList.filter((item: any) => item.type === source.type).length > 0) {
        return proxy.$toast({
            value: '已存在监视器列表',
            type: 'error'
        })
    }
    mainRef.detectorSourceList.push(source)
}
const selectSource = (compo: any, ci: any, i: any, sourceType: any) => {
    mainRef.nowCompoInfo = {compo, compoIdx: ci, listIdx: i, sourceType}
    getDetector(compo.id)
}
const getDetector = async (id: any) => {
    mainRef.currentCompo = await deviceManager.getDetector(id)
    console.log(mainRef.currentCompo)
}
const addSourceItem = async (name: any) => {
    proxy.$loading.open('添加器件中...')
    let detector = new PhotDetector()
    detector.name = name
    detector.detectorType = mainRef.detectorSourceList[mainRef.currentListIdx].type
    await nextTick()
    await deviceManager.addDetector(detector)
    const item = {
        name: name || 'New Detector',
        icon: '',
        id: detector.detectorId
    }
    mainRef.detectorSourceList[mainRef.currentListIdx].list.push(item)
    proxy.$loading.close()
    proxy.$toast({
        type: 'success',
        value: '添加成功'
    })
}
const init = () => {
    const compoParameters = deviceManager.compoParametersList.get(deviceManager.photGridId)
    mainRef.detectorSourceList = compoParameters ? compoParameters.detector : []
}
defineExpose({
    addSourceItem,
    addSource,
    init
})
</script>


<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  background-color: #ccc;
  color: #409EFF;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.dropdown-menu--bottom-end {
  margin-top: 0.5rem;
  margin-right: 0;
}
</style>